<template>
    <div>
        <el-tabs type="border-card">
            <div>
                <v-form-designer ref="vfDesigner" :designer-config="designerconfig">
                    <template #customToolButtons>
                        <el-button type="text" @click="AddVisible = true"><i class="el-icon-finished" />保存</el-button>
                    </template>
                </v-form-designer>
            </div>
        </el-tabs>
        <!-- 保存 -->
        <div>
            <el-dialog title="保存" v-if="AddVisible" :visible.sync="AddVisible" width="30%" :before-close="handleClose">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="申请名称" prop="formName">
                        <el-input v-model="ruleForm.formName"></el-input>
                    </el-form-item>
                    <el-form-item label="申请描述" prop="description">
                        <el-input v-model="ruleForm.description"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddVisible = false">取 消</el-button>
                    <el-button type="primary" @click="Add()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { getFormList, DeleteForm, QueryIdForm, UpdateForm, AllDeleteForm, AddForm } from '@/api/form.js';
export default {
    data() {
        return {
            //保存弹框
            AddVisible: false,
            ruleForm: {
                formName: '',
                formJson: '',
                description: ''
            },
            rules: {},
            designerconfig: {
                //是否显示语言切换菜单
                languageMenu: true,

                //是否显示GitHub、文档等外部链接
                externalLink: true,
                //是否显示表单模板
                formTemplates: true,

                //是否禁止修改唯一名称
                widgetNameReadonly: false,

                //是否显示组件事件属性折叠面板
                eventCollapse: true,

                //是否显示清空设计器按钮
                clearDesignerButton: true,

                //是否显示预览表单按钮
                previewFormButton: true,

                //是否显示导入JSON按钮
                importJsonButton: false,

                //是否显示导出JSON器按钮
                exportJsonButton: false,

                //是否显示导出代码按钮
                exportCodeButton: false,

                //是否显示生成SFC按钮
                generateSFCButton: true,

                //工具按钮栏最大宽度（单位px）
                //如新增按钮后不可见，请调大
                //如右侧空白区域过大，请调小
                toolbarMaxWidth: 420,

                //工具栏按钮最小宽度（单位px）
                //值必须小于toolbarMaxWidth
                toolbarMinWidth: 300,

                //表单设计器预设CSS代码
                presetCssCode: '',

                //表单设计器初始化自动清空内容
                /* 如设置为true，则刷新页面时也会清空设计器画布区域，慎用！*/
                resetFormJson: false,

                //设置自定义产品名称（仅Pro）
                productName: '',
                //设置自定义产品标题（仅Pro）
                productTitle: '',

                //是否显示顶部LOGO条（仅Pro）
                logoHeader: true
            }
        };
    },
    methods: {
        Add() {
            let rews = this.$refs.vfDesigner.getFormJson();
            console.log("111",rews);
            this.ruleForm.formJson = JSON.stringify(rews);
            AddForm(this.ruleForm).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success('添加成功');
                    this.AddVisible = false;
                    this.$router.push('/tableinfo');
                } else {
                    this.$message.success(res.Message);
                }
            });
        }
    }
};
</script>
  
  
  